<template>
  <transition name="el-zoom-in-center">
    <div class="JNPF-preview-main">
      <div class="JNPF-common-page-header">
        <el-page-header @back="goBack" :content="!dataForm.id ? '新建':'编辑'" />
        <div class="options">
          <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"> 保 存</el-button>
          <el-button @click="goBack"> 取 消</el-button>
        </div>
      </div>
      <el-row :gutter="15" class=" main" :style="{margin: '0 auto',width: '100%'}">
        <el-form ref="elForm" :model="dataForm" :rules="rules" size="mini" label-width="100px" label-position="top">
          <template v-if="!loading">
            <el-col :span="24">
              <el-form-item label="实施计划号" prop="plancode">
                <el-input v-model="dataForm.plancode" placeholder="请输入" clearable :style='{"width":"100%"}'
                  @change="isExist">

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="物料编码" prop="matcode">
                <popupSelect v-model="dataForm.matcode" placeholder="请选择" clearable field="matcode"
                  interfaceId="372311571319229701" :columnOptions="matcodecolumnOptions" propsValue="F_MatCode"
                  relationField="F_MatCode" popupType="dialog" popupTitle="选择数据" popupWidth="800px"
                  @change="changeInput">

                </popupSelect>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="物料名称" prop="matname">
                <el-input v-model="dataForm.matname" placeholder="请输入" readonly clearable :style='{"width":"100%"}'>

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="规格型号" prop="matspec">
                <el-input v-model="dataForm.matspec" placeholder="请输入" readonly clearable :style='{"width":"100%"}'>

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="部门" prop="dept">
                <dep-select v-model="dataForm.dept" placeholder="请选择" clearable>

                </dep-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="要求完成时间" prop="requiredtime">
                <el-date-picker v-model="dataForm.requiredtime" placeholder="请选择" clearable :style='{"width":"100%"}'
                  type="date" format="yyyy-MM-dd" value-format="timestamp">

                </el-date-picker>
              </el-form-item>
            </el-col>
          </template>
        </el-form>
        <SelectDialog v-if="selectDialogVisible" :config="currTableConf" :formData="dataForm" ref="selectDialog"
          @select="addForSelect" @close="selectDialogVisible=false" />
      </el-row>
    </div>
  </transition>
</template>
<script>
  import request from '@/utils/request'
  import {
    getDataInterfaceRes
  } from '@/api/systemData/dataInterface'
  import {
    getDictionaryDataSelector
  } from '@/api/systemData/dictionary'
 
  export default {
    components: {},
    props: [],
    data() {
      return {
        visible: false,
        loading: false,
        btnLoading: false,
        selectDialogVisible: false,
        currTableConf: {},
        addTableConf: {},
        tableRows: {},
        currVmodel: "",
        dataForm: {
          plancode: '',
          matcode: "",
          matname: '',
          matspec: '',
          dept: '',
          requiredtime: '',
          creatoruserid: "",
          creatortime: "",
          lastmodifyuserid: "",
          lastmodifytime: "",
        },
        rules: {
          plancode: [{
            required: true,
            message: '请输入计划号',
            trigger: 'blur'
          }, ],
          matcode: [{
            required: true,
            message: '请选择物料编码',
            trigger: 'blur'
          }, ],
          matname: [{
            required: true,
            message: '请选择物料名',
            trigger: 'blur'
          }, ],
          matspec: [{
            required: true,
            message: '请选择物料规格',
            trigger: 'blur'
          }, ],
          dept: [{
            required: true,
            message: '请选择部门',
            trigger: 'blur'
          }, ],

          requiredtime: [{
            required: true,
            message: '请选择邀请时间',
            trigger: 'blur'
          }, ],


        },
        matcodecolumnOptions: [{
          "label": "物料编码",
          "value": "F_MatCode"
        }, {
          "label": "物料名称",
          "value": "F_MatName"
        }, {
          "label": "规格型号",
          "value": "F_MatSpec"
        }, ],

      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
     
      changeInput(value, valueData) {
        if (value === undefined || value === '') {
          return
        }
        if (value == this.dataForm.matcode) {
          this.dataForm.matname = valueData.F_MatName
          this.dataForm.matspec = valueData.F_MatSpec
        }
      },
      goBack() {
        this.$emit('refresh')
      },
      clearData() {
        this.dataForm.plancode = '';
        this.dataForm.matcode = "";
        this.dataForm.matname = '';
        this.dataForm.matspec = '';
        this.dataForm.dept = '';
        this.dataForm.requiredtime = '';
        this.dataForm.creatoruserid = "";
        this.dataForm.creatortime = "";
        this.dataForm.lastmodifyuserid = "";
        this.dataForm.lastmodifytime = "";
      },
      init(id) {
        this.dataForm.id = id || 0;
        this.visible = true;
        this.$nextTick(() => {
          this.$refs['elForm'].resetFields();
          if (this.dataForm.id) {
            this.loading = true
            request({
              url: '/api/example/GyPlanNum/' + this.dataForm.id,
              method: 'get'
            }).then(res => {
              this.dataInfo(res.data)
              this.loading = false
            });
          } else {
            this.clearData()
          }
        });
        this.$store.commit('generator/UPDATE_RELATION_DATA', {})
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['elForm'].validate((valid) => {
          if (valid) {
            this.request()
          }
        })
      },
      request() {
        this.btnLoading = true
        let _data = this.dataList()
        if (!this.dataForm.id) {
          request({
            url: '/api/example/GyPlanNum',
            method: 'post',
            data: _data
          }).then((res) => {
            this.$message({
              message: res.msg,
              type: 'success',
              duration: 1000,
              onClose: () => {
                this.visible = false
                this.btnLoading = false
                this.$emit('refresh', true)
              }
            })
          }).catch(() => {
            this.btnLoading = false
          })
        } else {
          request({
            url: '/api/example/GyPlanNum/' + this.dataForm.id,
            method: 'PUT',
            data: _data
          }).then((res) => {
            this.$message({
              message: res.msg,
              type: 'success',
              duration: 1000,
              onClose: () => {
                this.visible = false
                this.btnLoading = false
                this.$emit('refresh', true)
              }
            })
          }).catch(() => {
            this.btnLoading = false
          })
        }
      },
      openSelectDialog(key) {
        this.currTableConf = this.addTableConf[key]
        this.currVmodel = key
        this.selectDialogVisible = true
        this.$nextTick(() => {
          this.$refs.selectDialog.init()
        })
      },
      addForSelect(data) {
        for (let i = 0; i < data.length; i++) {
          let item = {
            ...this.tableRows[this.currVmodel],
            ...data[i]
          }
          this.dataForm[this.currVmodel].push(item)
        }
      },
      dataList() {
        var _data = JSON.parse(JSON.stringify(this.dataForm));
        return _data;
      },
      dataInfo(dataAll) {
        let _dataAll = dataAll
        this.dataForm = _dataAll
      },
    },
  }
</script>
